<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:j="http://tags"
                xmlns:p="http://primefaces.org/ui"
                template="/facelets/templateMenu.xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:define name="head">
        <title>e-Home - Usuários</title>
    </ui:define>

    <ui:define name="body">
        <h:form id="frmUsuario">
            <p:remoteCommand id="cmdNovoUsuario"
                             name="novoUsuario"
                             actionListener="#{usuarioController.novo()}"
                             update="pnlUsuarioTitulo, pnlUsuarioDados, pnlUsuarioPermissoes"
                             oncomplete="$('#modal-usuario').modal('show'); return false;"/>

            <p:remoteCommand id="cmdAlterarUsuario"
                             name="alterarUsuario"
                             update="pnlUsuarioTitulo, pnlUsuarioDados, pnlUsuarioPermissoes"
                             actionListener="#{usuarioController.alterar()}"
                             oncomplete="$('#modal-usuario').modal('show'); return false;"/>

            <p:remoteCommand id="cmdExcluirUsuario"
                             name="excluirUsuario"
                             update="lblUsuarioExcluir"
                             actionListener="#{usuarioController.excluir()}"
                             oncomplete="$('#modal-usuario-excluir').modal('show'); return false;"/>

            <p:remoteCommand id="cmdConfirmarExclusaoUsuario"
                             name="confirmarExclusaoUsuario"
                             update="dtbUsuario"
                             actionListener="#{usuarioController.confirmarExclusao()}"
                             oncomplete="$('#modal-usuario-excluir').modal('hide'); return false;"/>

            <p:remoteCommand id="cmdCancelarExclusaoUsuario"
                             name="cancelarExclusaoUsuario"
                             onstart="$('#modal-usuario-excluir').modal('hide'); return false;"/>

            <p:remoteCommand id="cmdSalvarUsuario"
                             name="salvarUsuario"
                             update="dtbUsuario"
                             actionListener="#{usuarioController.salvar()}"
                             oncomplete="$('#modal-usuario').modal('hide'); return false;"/>

            <p:remoteCommand id="cmdCancelarUsuario"
                             name="cancelarUsuario"
                             onstart="$('#modal-usuario').modal('hide'); return false;"/>

            <div id="modal-usuario" class="modal hide fade">
                <div class="modal-header">
                    <p:outputPanel id="pnlUsuarioTitulo">
                        <h:panelGrid columns="2" cellpadding="5">
                            <p:graphicImage value="/resources/img/#{(usuarioController.operacao == consUtilController.operacaoNOVO) ? 'userAdd' : (usuarioController.operacao == consUtilController.operacaoALTERAR) ? 'userEdit' : 'user'}.png" />
                            <h3 id="modal-title">#{(usuarioController.operacao == consUtilController.operacaoNOVO) ? 'Novo Usuário' : (usuarioController.operacao == consUtilController.operacaoALTERAR) ? 'Alterar Usuário' : 'Usuário'}</h3>
                        </h:panelGrid>
                    </p:outputPanel>
                </div>
                <div class="modal-body">
                    <p class="center" id="modal-content">
                        <div class="tabbable">
                            <ul class="nav nav-tabs">
                                <li class="active"><a href="#tab1" data-toggle="tab">
                                        <span class="add-on"><i class="icon-user"></i></span>
                                        Dados
                                    </a>
                                </li>
                                <li><a href="#tab2" data-toggle="tab">
                                        <span class="add-on"><i class="icon-check"></i></span>
                                        Permissões
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="tab1">
                                    <p:outputPanel id="pnlUsuarioDados">
                                        <table cellpadding="5" cellspacing="5" style="width: 500px;">
                                            <tr>
                                                <td>
                                                    <h:outputLabel value="Grupo:"
                                                                   style="font-weight: bold; text-align: right;"/>
                                                </td>

                                                <td colspan="3">
                                                    <h:selectOneMenu value="#{usuarioController.usuarioSelecionado.usuarioGrupo}"
                                                                     converter="genericConverter">
                                                        <f:ajax render=":frmUsuario:pnlUsuarioDados"/>

                                                        <f:selectItems value="#{usuarioController.usuarioGrupos}"
                                                                       var="usuarioGrupo"
                                                                       itemValue="#{usuarioGrupo}"
                                                                       itemLabel="#{usuarioGrupo.ugrNome}"/>
                                                    </h:selectOneMenu>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <h:outputLabel value="Nome:"
                                                                   style="font-weight: bold; text-align: right;"/>
                                                </td>

                                                <td colspan="3">
                                                    <p:outputPanel styleClass="input-prepend">
                                                        <span class="add-on"><i class="icon-font"></i></span>
                                                        <h:inputText id="txtUsuNome"
                                                                     value="#{usuarioController.usuarioSelecionado.usuNome}"
                                                                     class="input-block-level"
                                                                     style="width: 100%;"/>
                                                    </p:outputPanel>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <h:outputLabel value="E-mail:"
                                                                   style="font-weight: bold; text-align: right;"/>
                                                </td>

                                                <td colspan="3">
                                                    <p:outputPanel styleClass="input-prepend">
                                                        <span class="add-on"><i class="icon-envelope"></i></span>
                                                        <h:inputText id="txtUsuEmail"
                                                                     value="#{usuarioController.usuarioSelecionado.usuEmail}"
                                                                     class="input-block-level"
                                                                     style="width: 100%;"/>
                                                    </p:outputPanel>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <h:outputLabel value="Nova Senha:"
                                                                   style="font-weight: bold; text-align: right;"/>
                                                </td>

                                                <td>
                                                    <p:outputPanel styleClass="input-prepend">
                                                        <span class="add-on"><i class="icon-asterisk"></i></span>
                                                        <p:password id="txtSenha"
                                                                    styleClass="input-block-level"
                                                                    value="#{usuarioController.novaSenha}"
                                                                    inline="true"
                                                                    feedback="true"/>
                                                    </p:outputPanel>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <h:outputLabel value="Bloqueado:"
                                                                   style="font-weight: bold; text-align: right;"/>
                                                </td>
                                                <td>
                                                    <j:booleanButton id="bloqueado"
                                                                     value="#{usuarioController.usuarioSelecionado.usuBloqueado}"
                                                                     update=":frmUsuario:pnlUsuarioDados"/>
                                                </td>
                                            </tr>
                                        </table>
                                    </p:outputPanel>
                                </div>
                                <div class="tab-pane" id="tab2">
                                    <p:outputPanel id="pnlUsuarioPermissoes">
                                        <h:panelGrid columns="2">
                                            <h:outputLabel value="Controlar por Grupo:"
                                                           style="font-weight: bold;"/>
                                            <j:booleanButton id="permissaoPorGrupo"
                                                             value="#{usuarioController.usuarioSelecionado.usuPermissaoPorGrupo}"
                                                             update=":frmUsuario:pnlUsuarioPermissoes"/>
                                        </h:panelGrid>

                                        <h:panelGrid columns="2">
                                            <h:outputLabel value="Categoria:"
                                                           style="font-weight: bold;"
                                                           rendered="#{(!usuarioController.usuarioSelecionado.usuPermissaoPorGrupo)}"/>
                                            <h:selectOneMenu value="#{usuarioController.acaoGrupoSelecionado}"
                                                             converter="genericConverter"
                                                             rendered="#{(!usuarioController.usuarioSelecionado.usuPermissaoPorGrupo)}">
                                                <f:ajax render=":frmUsuario:dtbUsuarioPermissao"
                                                        listener="#{usuarioController.carregarAcoesPorGrupo()}"/>

                                                <f:selectItems value="#{usuarioController.acaoGrupos}"
                                                               var="acaoGrupo"
                                                               itemValue="#{acaoGrupo}"
                                                               itemLabel="#{acaoGrupo.agrNome}"/>
                                            </h:selectOneMenu>
                                        </h:panelGrid>

                                        <p:dataTable id="dtbUsuarioPermissao"
                                                     value="#{usuarioController.usuarioAcoesPorGrupo}"
                                                     filteredValue="#{usuarioController.usuarioAcoesPorGrupoFiltrados}"
                                                     var="usuarioAcao"
                                                     filterEvent="enter"
                                                     emptyMessage="Nenhuma permissão encontrada."
                                                     style="max-height: 250px; margin-top: 5px;"
                                                     rendered="#{(!usuarioController.usuarioSelecionado.usuPermissaoPorGrupo)}">

                                            <p:column id="colAcao"
                                                      headerText="Ação"
                                                      style="text-align: right; width: 250px;">
                                                #{usuarioAcao.acao.acaoDescricao}
                                            </p:column>

                                            <p:column id="colPermissao"
                                                      headerText="Permissão"
                                                      style="text-align: left;">
                                                <j:booleanButton id="Permissao_#{usuarioAcao.usuario.usuCodigo}_#{usuarioAcao.acao.acaoCodigo}"
                                                                 update=":frmUsuario:pnlUsuarioPermissoes"
                                                                 value="#{usuarioAcao.usaPermissao}"/>
                                            </p:column>
                                        </p:dataTable>
                                    </p:outputPanel>
                                </div>
                            </div>
                        </div>
                    </p>
                </div>
                <div class="modal-footer">
                    <button id="btnSalvarUsuario"
                            type="button"
                            class="btn btn-primary"
                            onclick="salvarUsuario();">
                        <i class="icon-ok icon-white"></i>
                        Salvar
                    </button>

                    <button id="btnCancelarUsuario"
                            type="button"
                            class="btn"
                            onclick="cancelarUsuario();">
                        <i class="icon-remove"></i>
                        Cancelar
                    </button>
                </div>
            </div>

            <div id="modal-usuario-excluir" class="modal hide fade">
                <div class="modal-header">
                    <h:panelGrid columns="2" cellpadding="5">
                        <p:graphicImage value="/resources/img/userRem.png" />
                        <h3 id="modal-title">Excluir Usuário</h3>
                    </h:panelGrid>
                </div>
                <div class="modal-body">
                    <p class="center" id="modal-content">
                        <p:outputLabel id="lblUsuarioExcluir"
                                       value="Deseja realmente excluir o usuário #{usuarioController.usuarioSelecionado.usuNome}?"/>
                    </p>
                </div>
                <div class="modal-footer">
                    <button id="btnConfirmarExclusao"
                            type="button"
                            class="btn btn-danger"
                            onclick="confirmarExclusaoUsuario();">
                        <i class="icon-trash icon-white"></i>
                        Excluir
                    </button>

                    <button id="btnCancelarExclusao"
                            type="button"
                            class="btn"
                            onclick="cancelarExclusaoUsuario();">
                        <i class="icon-remove"></i>
                        Não, espere!
                    </button>
                </div>
            </div>

            <div class="page-header">
                <h:panelGrid columns="2" cellpadding="5">
                    <p:graphicImage value="/resources/img/user.png" />
                    <h1>Usuários</h1>
                </h:panelGrid>

                <button id="btnNovoUsuario"
                        type="button"
                        class="btn btn-primary"
                        onclick="novoUsuario();">
                    <i class="icon-plus icon-white"></i>
                    Novo
                </button>
            </div>

            <p:dataTable id="dtbUsuario"
                         value="#{usuarioController.usuarios}"
                         filteredValue="#{usuarioController.usuariosFiltrados}"
                         rowKey="#{usuario.usuCodigo}"
                         filterEvent="enter"
                         var="usuario"
                         emptyMessage="Nenhum usuário encontrado.">

                <p:column id="colNome"
                          headerText="Usuário"
                          filterBy="#{usuario.usuNome}"
                          filterMatchMode="contains"
                          sortBy="#{usuario.usuNome}"
                          style="text-align: center;">
                    #{usuario.usuNome}
                </p:column>

                <p:column id="colEmail"
                          headerText="E-mail"
                          filterBy="#{usuario.usuEmail}"
                          filterMatchMode="contains"
                          sortBy="#{usuario.usuEmail}"
                          style="text-align: center;">
                    #{usuario.usuEmail}
                </p:column>

                <p:column id="colGrupo"
                          headerText="Grupo"
                          filterBy="#{usuario.ugrNome}"
                          filterMatchMode="contains"
                          sortBy="#{usuario.ugrNome}"
                          style="text-align: center;">
                    #{usuario.ugrNome}
                </p:column>

                <p:column id="colAcoes"
                          headerText="Ações"
                          style="text-align: center; width: 100px;">
                    <button id="btnAlterarUsuario"
                            type="button"
                            class="btn"
                            onclick="alterarUsuario([{name: 'usuCodigo', value: #{usuario.usuCodigo}}]);"
                            style="margin-right: 2px;">
                        <i class="icon-pencil"></i>

                    </button>

                    <button id="btnExcluirUsuario"
                            type="button"
                            class="btn btn-danger"
                            onclick="excluirUsuario([{name: 'usuCodigo', value: #{usuario.usuCodigo}}]);">
                        <i class="icon-trash icon-white"></i>

                    </button>
                </p:column>
            </p:dataTable>
        </h:form>
    </ui:define>
</ui:composition>